<template>
    <div style="position: relative">
        <div v-if="tabshow" @click="backto()" :class="{'animated rotateInDownLeft':tabshow}" class="backtop"
             style="top:700px;right:20px;line-height: 36px;text-align: center;z-index: 100;position: fixed;width: 36px;height: 36px;background-color: #F96868;display: block">
            <i class="el-icon-arrow-up"></i>
        </div>
        <router-view/>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                scrollTopNum: "",//页面滚动的高度
                tabshow: false,//是否进行某种操作
            };
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true);
        },
        methods: {
            handleScroll() {
                let top =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop ||
                    window.pageYOffset;
                this.scrollTopNum = top;
            },
            backto() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                })
            }
        },
        watch: {
            scrollTopNum: function () {
                if (this.scrollTopNum > 200) {
                    this.tabshow = true;
                } else {
                    this.tabshow = false;
                }
            },
        },
    }
</script>
<style lang="less">
    .backtop {
        cursor: pointer;
        transition: all 0.9s;
    }

    .backtop:hover {
        background-color: skyblue !important;
        opacity: 0.5;
    }

    /deep/ .el-carousel__button {
        background-color: #1D9BFF;
        height: 5px;
    }

    .head1-img {
        overflow: hidden;
        transform: rotate(deg);
    }

    /*.el-carousel__item h3 {*/
    /*    color: #475669;*/
    /*    font-size: 18px;*/
    /*    opacity: 0.75;*/
    /*    line-height: 300px;*/
    /*    margin: 0;*/
    /*}*/

    /*.el-carousel__item:nth-child(2n) {*/
    /*    background-color: #99a9bf;*/
    /*}*/

    /*.el-carousel__item:nth-child(2n+1) {*/
    /*    background-color: #d3dce6;*/
    /*}*/
    .swiper {
        background-image: url("./assets/swiper/swiper01.jpg");
        background-color: pink;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .bar1-in {
        transition: all 0.9s;
        width: 0;
        height: 100%;
        background-color: #1CBBB4;

    }

    .zi {
        transition: all 0.7s;

    }

    .head1:hover .zi {
        color: #1CBBB4 !important;

    }

    .head1:hover .bar1-in {
        background-color: #1CBBB4;
        height: 100%;
        width: 100%;
    }

    .head1-bottom {
        box-sizing: border-box;
    }

    .head1:hover .head1-bottom {
        /*background-color: pink;*/
        border: 3px solid #F2F2F2;
        border-top: 0;
        box-shadow: 2px 3px 4px #F4F4F4;

    }

    .head1-img {
        transition: all 0.5s;

    }

    .head1 {
        overflow: hidden;
    }

    .head1:hover .head1-img {
        background-color: pink;
        transform: scale(1.1);
    }

    .ziti1 {
        transition: all 0.6s;
    }

    .head1:hover .ziti1 {
        color: #0FC7D1 !important;
    }

    .login {
        cursor: pointer;
        transition: all 0.5s;
    }

    .login:hover {
        color: #1ABC9C;
    }

    .register {
        cursor: pointer;
        transition: all 0.5s;
    }

    .register:hover {
        color: #1ABC9C;
    }

</style>

